// @ts-nocheck
import React from 'react';
import ReactDOM from 'react-dom';
import isNaN from 'lodash/isNaN';
import moment from 'moment';
import {
  DataSet,
  Button,
  Table,
  NumberField,
  TextArea,
  DateTimePicker,
  SelectBox,
  AutoComplete,
  Row,
  Col,
} from 'choerodon-ui/pro';
import { TableListDataSetConfig } from './store';
import styles from './index.less';

const { Column } = Table;

function aggregationRendereer({ text, record }) {
  return (
    <Row>
      <Col span={6}>{record.get('email')}</Col>
      <Col span={18}>{text}</Col>
    </Row>
  );
}

function renderColumnHeader(dataset, name) {
  const field = dataset.getField(name);
  return <span style={{ fontWeight: 'bold' }}>{field ? field.get('label') : ''}</span>;
}

class App extends React.Component {
  state = {
    aggregation: true,
  };

  constructor(props) {
    super(props);
    this.ds = new DataSet(TableListDataSetConfig(props.boCode || 'SRQC_ORDER'));
  }

  handleAggregationChange = aggregation => {
    this.setState({ aggregation });
  };

  render() {
    const { aggregation } = this.state;
    const buttons = [
      <Button
        key="aggregation"
        onClick={() => this.handleAggregationChange(!aggregation)}
        funcType={'raised'}
        // color='blue'
        style={{
          background: '#fff',
          color: '#0840f8',
          // fontWeight: 'bold',
          borderRadius: 13,
        }}
        color="primary"
      >
        {aggregation ? '平铺' : '聚合'}
      </Button>,
      <Button
        key="a1"
        funcType={'raised'}
        style={{
          // fontWeight: 'bold',
          background: '#fff',
          color: '#0840f8',
          borderRadius: 13,
        }}
        // color='blue'
        color="primary"
      >
        高级搜索
      </Button>,
      <Button key="a2" funcType={'raised'} style={{ borderRadius: 13 }}>
        新建请求单
      </Button>,
      <Button
        key="a2"
        funcType={'raised'}
        style={{ borderRadius: 13 }}
        // color={}
      >
        保存
      </Button>,
      <Button key="a2" funcType={'raised'} style={{ borderRadius: 13 }}>
        删除
      </Button>,
    ];
    const command = [
      <Button key="edit" funcType="link">
        编辑
      </Button>,
      <Button key="opera" funcType="link">
        操作记录
      </Button>,
    ];
    return (
      <div className={styles.overrideTable}>
        <Table
          buttons={buttons}
          customizable
          customizedCode="aggregation"
          key="user"
          dataSet={this.ds}
          columnDraggable
          columnTitleEditable
          // style={{ height: 'calc(100vh - 100px)' }}
          aggregation={aggregation}
          onAggregationChange={this.handleAggregationChange}
          virtualCell
          queryBar={'filterBar' as any}
        >
          <Column
            name="documentNum"
            header={renderColumnHeader}
            style={{ color: '#0840f8' }}
            tooltip="overflow"
            // editor
            width={200}
            minWidth={150}
            lock
            sortable
          />
          <Column
            // header="基本信息"
            header={() => (
              <span style={{ fontWeight: 'bold' }}>
                基本信息
              </span>
            )}
            align="left"
            aggregation
            key="basic-group"
            aggregationDefaultExpandedKeys={[
              'basic-subgroup-1',
              'basic-subgroup-2',
            ]}
          >
            <Column
              header={() => (
                <span style={{ color: '#0840f8', fontWeight: 'bold' }}>
                  请求单信息
                </span>
              )}
              key="basic-subgroup-1"
            >
              <Column
                name="status"
                // editor
                width={200}
                // sortable
                // footer={renderColumnFooter}
              />
              <Column
                name="sourceDocNum"
                lock
                hiddenInAggregation={record => record.index === 0}
                // editor={
                //   <AutoComplete
                //     onFocus={this.handeValueChange}
                //     onInput={this.handeValueChange}
                //     options={this.options}
                //   />
                // }
              />
              <Column
                name="sourceDocTypeCode"
                lock
                // hiddenInAggregation={(record) => record.index === 0}
                // editor={
                //   <AutoComplete
                //     onFocus={this.handeValueChange}
                //     onInput={this.handeValueChange}
                //     options={this.options}
                //   />
                // }
              />
            </Column>
            <Column
              header={() => (
                <span style={{ color: '#0840f8', fontWeight: 'bold' }}>
                  创建信息
                </span>
              )}
              key="basic-subgroup-2"
              style={{ color: '#0840f8', fontWeight: 'bold' }}
            >
              <Column
                name="createdUser"
                // editor
                width={200}
                minWidth={50}
                lock
                tooltip="overflow"
              />
              <Column
                name="creationDate"
                // editor={<TextArea />}
                width={200}
                // sortable
              />
            </Column>
          </Column>
          <Column
            // header="请求信息"
            header={() => (
              <span style={{ fontWeight: 'bold' }}>
                请求信息
              </span>
            )}
            align="center"
            aggregation
            renderer={aggregationRendereer}
            key="code-group"
            aggregationLimitDefaultExpanded
          >
            <Column name="customerFeedback" width={150} sortable />
            <Column name="sourceTypeCode" width={150} tooltip="overflow" />
            {/* TODO: jixu */}
            <Column name="engineNumber" width={150} />
            <Column name="customerName" width={150} />
            <Column name="customerMobile" width={150} />
            <Column name="customerEmail" width={150} />
            <Column name="acceptTypeCode" width={150} />
            <Column name="companyName" width={150} />
            <Column name="serviceTypeCode" width={150} />
            {/* 业务板块 */}
            <Column name="businessSectorName" width={150} />
            <Column name="requestTypeCode" width={150} />
            <Column name="productModel" width={150} />
            <Column name="amount" width={150} />
          </Column>
          <Column
            // header="委派信息"
            header={() => (
              <span style={{ fontWeight: 'bold' }}>
                委派信息
              </span>
            )}
            align="left"
            aggregationLimit={2}
            aggregation
            key="sex-group"
            aggregationLimitDefaultExpanded
            // aggregationLimitDefaultExpanded={(record) =>
            //   record.get('sex') === 'M'
            // }
          >
            <Column name="purposeCode" width={150} />
            <Column name="levelCode" width={150} />
            {/* 服务站、办事处、子公司 */}
            <Column name="serviceStationName" width={150} />
            <Column name="officeName" width={150} />
            <Column name="subCompanyName" width={150} />

            <Column name="acceptOpinions" width={150} />
          </Column>
          <Column
            // header="时间信息"
            header={() => (
              <span style={{ fontWeight: 'bold' }}>
                时间信息
              </span>
            )}
            align="left"
            aggregation
            key="date-group"
            aggregationLimitDefaultExpanded
          >
            <Column name="requestStartDate" width={150} />
            <Column name="requestEndDate" width={150} />
            <Column name="serviceAssignDate" width={150} />
            <Column name="serviceStationReceiveDate" width={150} />
            {/* <Column
              header={() => (
                <span style={{ fontWeight: 'bold', background: 'skyblue' }}>
                  时间
                </span>
              )}
              name="time"
              // editor={<DateTimePicker />}
              width={150}
            /> */}
          </Column>
          {/* <Column name="numberMultiple" editor width={150} minWidth={50} />
        <Column name="frozen" editor width={50} minWidth={50} lock="right" /> */}
          <Column
            // header="操作"
            header={() => (
              <span style={{ fontWeight: 'bold' }}>
                操作
              </span>
            )}
            width={150}
            minWidth={50}
            lock="right"
            command={command}
            align={aggregation ? 'left' : 'center'}
          />
        </Table>
      </div>
    );
  }
}

export default App;
